import React from 'react'
import { WapHome, Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { Checkbox } from 'antd-mobile'
import '../css/shopcart.css'

export default function ShopCart() {

    const navigate = useNavigate();
    const returns = () => {
        navigate('/home/parts');
    }

    return (
        <div className='box2-zcy'>
            <div className="top1-zcy">
                <img onClick={returns} src="../img/13.png" alt="" />
                <p className='shopcars-zcy'>购物车</p>
                <p>管理</p>
            </div>
            <div className="content-zcy">
                <div className="cart1-zcy">
                    <div className='cart1-1-zcy'>
                        <img className='img1-zcy' src="../img/goods1.png" alt="" />
                        <p className='type-zcy'>钛合金款</p>
                        <p className='price-zcy'>41800.00元</p>
                    </div>
                    <div className="cart1-2-zcy">
                        <p className='shopname-zcy'><WapHome style={{ fontSize: '20' }} />藤原の改装店<Arrow /></p>
                        <div className="cont-zcy">
                            <p>Velocita（威洛 斯蒂）Porsche </p>
                            <p>panamera 2.9T 高性能排气系统</p>
                        </div>
                        <div className='address-zcy'>
                            <p className='addr1-zcy'>适用车型：保时捷帕拉梅拉</p>
                            <p>类　型： 排气</p>
                            <p>质保期： 1年</p>
                            <p>地　区： 中国</p>
                        </div>
                    </div>
                    <div className='number-zcy'>x1</div>
                </div>

                <div className="cart2-zcy">
                    <div className='cart2-1-zcy'>
                        <img className='img1-zcy' src="../img/goods2.png" alt="" />
                        <p className='type-zcy'>不锈钢款</p>
                        <p className='price-zcy'>56800.00元</p>
                    </div>
                    <div className="cart2-2-zcy">
                        <p className='shopname-zcy'><WapHome style={{ fontSize: '20' }} />藤原の改装店<Arrow /></p>
                        <div className="cont-zcy">
                            <p>Velocita（威洛斯蒂）Lambor</p>
                            <p>ghini URUS 高性能排气系统</p>
                        </div>
                        <div className='address-zcy'>
                            <p className='addr1-zcy'>适用车型：保时捷帕拉梅拉</p>
                            <p>类　型： 排气</p>
                            <p>质保期： 1年</p>
                            <p>地　区： 中国</p>
                        </div>
                    </div>
                    <div className='number-zcy'>x1</div>
                </div>

                <div className="cart3-zcy">
                    <div className='cart3-1-zcy'>
                        <img className='img3-zcy' src="../img/goods3.png" alt="" />
                        <p className='type-zcy'>钛合金款</p>
                        <p className='price-zcy'>6350.00元</p>
                    </div>
                    <div className="cart3-2-zcy">
                        <p className='shopname-zcy'><WapHome style={{ fontSize: '20' }} />藤原の改装店<Arrow /></p>
                        <div className="cont-zcy">
                            <p>日本WORK WORKZISTANCE  </p>
                            <p>W10M款 改装运动轮毂轮圈</p>
                        </div>
                        <div className='address-zcy'>
                            <p className='addr1-zcy'>适用车型：根据数据匹配大部分车型</p>
                            <p>类　型： 轮毂</p>
                            <p>质保期： 0年</p>
                            <p>地　区： 日本</p>
                        </div>
                    </div>
                    <div className='number-zcy'>x4</div>
                </div>

            </div>
            <div className="foot-zcy">
                <Checkbox className='check-zcy'>全选</Checkbox>
                <button className='btn-zcy'>结算</button>
            </div>

        </div>
    )
}



// //瀑布流布局
// //用flex弹性布局+计算元素高度实现布局
// const cardList1 = ref([])//各列的数据
// const cardList2 = ref([])
// const equallyCard = () => {
// //平分数据，确保页面上遍历卡片dom的真实顺序与平分的一致
// //document.querySelectorAll('.card-item'))
// let num = parseInt(encyList.value.length / 2)
// encyList.value.forEach((item, index) => {
//     if (index < num) {
//         cardList1.value.push(item)
//         return cardList1
//     }
//     if (index < 2 * num) {
//         cardList2.value.push(item)
//         return cardList2
//     }
// })
// }
// equallyCard()